<template>
	<view class="page-container">
		<view v-for="(item, index) in addressList" :key="index" class="contain-box">
			<uv-radio-group v-model="radiovalue" placement="column">
				<uv-radio :name="index">
					<view class="contain-box-inner">
						<view class="contain-text">
							<view class="title c_label">{{ item.name }} {{ item.mobile }} </view>
							<view class="address c_label">{{ item.area1 }} {{ item.area2 }} {{ item.area3 }} </view>
							<view class="delivery c_label">配送方式：{{ item.delivery }}</view>
						</view>
					</view>
				</uv-radio>
			</uv-radio-group>
		</view>
		<view class="box-container-button">
			<uv-button size="large" color="linear-gradient(to bottom, #167fff, #4b8aff)"
				customStyle="color:#ffffff;fontWeight:500;fontSize:16px" @click="submit">确定</uv-button>
		</view>
		<view class="box-container-button">
			<uv-button size="large" customStyle="color:#333333;fontWeight:500;fontSize:16px"
				@click="toAddAddress">新增地址</uv-button>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				radiovalue: ''
			}
		},
		computed: {
			...mapGetters(["addressList", "address"])
		},
		watch: {
			// 监听 addressList 变化，初始化选中的地址
			addressList: {
				immediate: true, // 组件加载时立即执行
				handler(newList) {
					if (newList.length > 0 && this.address) {
						const index = newList.findIndex(item => this.isSameAddress(item, this.address));
						if (index !== -1) {
							this.radiovalue = index; // 设置默认选中项
						}
					}
				}
			}
		},
		methods: {
			// 比较两个地址对象是否相同
			isSameAddress(item1, item2) {
				return (
					item1.name === item2.name &&
					item1.mobile === item2.mobile
				);
			},
			submit() {
				const selectedAddress = this.addressList[this.radiovalue];

				if (selectedAddress) {
					console.log("选中的地址信息：", selectedAddress);

					uni.navigateTo({
						url: '/pages/takeaway/settlement'
					});
				} else {
					this.$refs.toast.show({
						message: "请选择地址"
					})
					console.log("未选择地址");
				}
				this.$store.dispatch('updateAddress', selectedAddress);
			},
			toAddAddress() {
				uni.navigateTo({
					url: '/pages/takeaway/addAddress'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		background-color: #f1f1f1;
		min-height: 100vh;
		overflow: hidden;

		.contain-box {
			display: flex;
			padding: 24rpx;
			background-color: #ffffff;
			margin: 30rpx;
			border-radius: 16rpx;

			.contain-box-inner {
				display: flex;
				align-items: center;
				width: calc(100% - 72rpx);
				align-items: flex-start;
				padding-left: 10px;

				.contain-text {
					font-size: 28rpx;

					.c_label {
						line-height: 48rpx;
					}

					.title {
						color: #666666;
					}

					.address {
						color: #333333;
					}

					.delivery {
						color: #255ee3;
					}
				}
			}
		}

		.box-container-button {
			margin: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}

	}
</style>